<!DOCTYPE html>
<html>
<head>
    <% include ../include/css_header.html %>
    <style>
        .goods-list{
            min-height: 500px;
        }
        .goods-list .row{
            margin-bottom: 10px;
        }
        .goods-item{
            position: relative;
        }
        .goods-img, .goods-info{
            float: left;
            margin-right: 5px;
            height: 56px;
        }
        .goods-opt{
            position: absolute;
            right: 10px;
            color: #CCCCCC;font-size: 20px;
        }
        .goods-info h4{
            margin-top: 5px;
        }
        .off-goods{
            background-color: #DBDED8;
        }
        .off-tag{
            border: 1px solid #fff;
            color: #fff;
            font-weight: bold;
            padding: 5px;
            position: absolute;
            right: 50px;
            top: 20px;
            transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
    </style>
</head>
<body class="actlist_bg">
    <div class="container" style="min-height:640px">
        <div class="row">
            <div style="position: fixed;top: 10px;z-index: 10;" class="col-xs-12">
                <a class="icon-arrow-left" style="color: #ffffff;font-size: 24px;" href="/faction/<%=factionId %>"></a>
                <a class="icon-cog" id="goods_opt" style="color: #ffffff;font-size: 24px;float: right;" href="#"></a>
            </div>
        </div>
        <div style="height: 40px;"></div>
        <div class="font_shadow_133000" style="text-align: center;color: #ffffff;">
            <h2><strong>商品列表</strong></h2>
        </div>
        <div class="goods-list">
            <% if(goodslist.length > 0){ %>
                <% goodslist.forEach(function(goods){ %>
            <div class="row">
                <div class="col-xs-12">
                    <div class="bg_white_panel goods-item <%=goods.status==='on'?'':'off-goods'%>" data-id="<%=goods._id %>" id="g_<%=goods._id %>">
                        <div class="goods-img">
                            <img src="/goods/<%=factionId %>_<%=goods._id %>.jpg" class="img-rounded" style="width: 56px;height: 56px;"/>
                        </div>
                        <div class="goods-info">
                            <div><h4><%=goods.name %></h4></div>
                            <div>数量: <%=goods.count %> 积分: <%=goods.price %></div>
                        </div>
                        <div class="off-tag">已下架</div>
                        <div class="goods-opt">
                            <input type="checkbox" name="goodsId" value="<%=goods._id %>" />
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
                <% }) %>
            <% } %>
        </div>
        <div class="modal fade" id="goodsOpts" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="btn btn-default btn-lg btn-block" id="addGoodsBtn">新加商品</button>
                        <button type="button" class="btn btn-default btn-lg btn-block" id="onGoodsBtn">上架商品</button>
                        <button type="button" class="btn btn-default btn-lg btn-block" id="offGoodsBtn">商品下架</button>
                        <button type="button" class="btn btn-default btn-lg btn-block" id="delGoodsBtn">删除商品</button>
                    </div>
                </div>
            </div>
        </div>
        <% include ../include/copyright.html %>
    </div>
    <% include ../include/js_footer.html %>
    <script>
        var currentNode = {};
        $(function(){
            $('#goods_opt').on('click', function(){
               $('#goodsOpts').modal('show')
            });
            $('.goods-opt').on('click', function(event){
                event.stopPropagation();
            })
            $('.goods-item').on('click', function(){
                editGoods($(this));
            });
            $('#onGoodsBtn').on('click', function(){
                setGoodsStatus('on');
            });
            $('#offGoodsBtn').on('click', function(){
                setGoodsStatus('off');
            });
            $('#delGoodsBtn').on('click', function(){
                $('#goodsOpts').modal('hide')
                AlertBox.showConfirm('真的要删除这些商品吗？',{ok:'是的', cancel: '取消'}, function(){
                    setGoodsStatus('del');
                    AlertBox.closeAlertBox();
                }, function(){
                    AlertBox.closeAlertBox();
                }, true)
            });
            $('#addGoodsBtn').on('click', function(){
                window.location.href = '/addGoods/<%=factionId %>'
            })
        })
        function editGoods(obj){
            window.location.href = '/updateGoods/'+obj.data('id');
            console.log(obj.data('id'));
        }
        function setGoodsStatus(status){
            var idArr = [];
            $('input[name="goodsId"]:checked').each(function(obj){
                idArr.push($(this).val());
            })
            $.post('/setGoodsStatus', {ids: idArr, status: status}, function(res){
                if(status === 'off'){
                    idArr.forEach(function(id){
                        $('#g_'+id).addClass('off-goods')
                    })
                }
                if(status === 'on'){
                    //TODO
                    idArr.forEach(function(id){
                        $('#g_'+id).removeClass('off-goods')
                    })
                }
                if(status === 'del'){
                    //TODO
                    idArr.forEach(function(id){
                        $('#g_'+id).parent().parent().remove();
                    })
                }
                $('#goodsOpts').modal('hide')
            })
        }
    </script>
</body>
</html>